<template>
    <div class="category">
        <!-- 显示所有上架的父分类 -->
        <ul>
            <li v-for="(category, index) in firstCategoryList"
                :key="index"
                :class="{active: category.id == firstCategorySelected.id}"
                @click="selectFirstCategory(category)">{{ category.name }}</li>
        </ul>
        <!-- 显示父分类下的子分类 -->
        <ul v-if="firstCategorySelected.id">
            <li @click="selectSecondCategory({})" :class="{active: !secondCategorySelected.id}">全部</li>
            <li v-for="(category, index) in secondCategoryList"
                :key="index"
                :class="{active: category.id == secondCategorySelected.id}"
                @click="selectSecondCategory(category)">{{ category.name }}</li>
        </ul>
    </div>

    <!--  显示搜索到的商品  -->
    <div class="goodsList">
        <ul>
            <li v-for="(product, index) in productList" :key="index" @click="toProductView(product.id)">
                <div class="pic"><el-image :src="product.mainImage"/></div>
                <div class="name">{{product.name}}</div>
                <div class="dscp">{{product.subtitle}}</div>
                <div class="price">￥ {{product.price}}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";
import categoryApi from "@/api/categoryApi.js";
import productApi from "@/api/productApi.js";
import {useRouter} from "vue-router";

const router = useRouter();
//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//获取通过路径传递的参数
const props = defineProps({
    categoryId: String
});
//所有需要显示的父分类
const firstCategoryList = ref([]);
//所有需要显示的子分类
const secondCategoryList = ref([]);
//被选中的父分类
const firstCategorySelected = ref({});
//被选中的子分类
const secondCategorySelected = ref({});
//被选中的分类id - 可能是父分类id，也可能是子分类的id
const categoryId = ref(null);
//数据
const productList = ref([])

//通过路径传递的参数发生变化进行的处理
watch(props, () => {
    getParent();
})

//点击父分类调用的函数
function selectFirstCategory(category) {
    //给选中的父分类赋值
    firstCategorySelected.value = category;
    secondCategorySelected.value = {};
    //只要选则某个父分类，就要清空所有需要显示的子分类
    secondCategoryList.value = [];
    //给被选中的分类id赋值
    if(firstCategorySelected.value.id) {
        categoryId.value = firstCategorySelected.value.id;
    } else {
        categoryId.value = null;
    }

    //给被选中的父分类下的子分类赋值
    if(category.children) {
        // secondCategoryList.value = category.children;
        category.children
            .filter(c => c.status == 1)
            .forEach(c => secondCategoryList.value.push(c));
    }
    productList.value = category.productList
}

//点击子分类调用的函数
function selectSecondCategory(category) {
    //给选中的子分类赋值
    secondCategorySelected.value = category;
    //给被选中的分类id赋值
    if(secondCategorySelected.value.id) {
        categoryId.value = secondCategorySelected.value.id;
        //查询商品
        productApi.selectByCategoryId(categoryId.value).then(resp => {
            productList.value = resp.data;
        })
    } else {
        categoryId.value = firstCategorySelected.value.id;
        productList.value = firstCategorySelected.value.productList
    }
}

//获取父分类 上架-推荐
function getParent() {
    categoryApi.selectTopCategoryList()
        .then(resp => {
            firstCategoryList.value = resp.data;
            //假设没有通过路径传递参数或者传递的id在父分类中不存在
            let flag = true;
            firstCategoryList.value.forEach(c => {
                if(props.categoryId == c.id) {
                    flag = false;
                    selectFirstCategory(c);
                };
            });

            //假设成立
            if(flag == true) {
                //父分类设置选则全部
                selectFirstCategory({});
            }
        });
}

//跳转到商品详情页
function toProductView(id) {
    router.push({
        path: '/product',
        query: {
            id
        }
    })
}

getParent();
</script>

<style scoped>
    .category ul li {
        float: left;
        margin: 10px 20px;
        font-size: 14px;
        cursor: pointer;
    }

    .active {
        color: var(--theme-color);
        font-weight: bold;
    }

    .goodsList ul li {
        width: 224px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #EEE;
        cursor: pointer;
    }

    .goodsList ul li:hover {
        box-shadow: 0px 0px 20px #000;
    }

    .goodsList ul li:nth-child(5n) {
        margin-right: 0px;
    }

    .name, .dscp, .price {
        line-height: 25px;
    }

    .name {
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pic {
        width: 200px;
        height: 200px;
    }
</style>